<template>
  <div style="padding: 50px 0">
    <!-- 头部组件 -->
    <eleheader
      :title="newList.name"
      class="eleheader"
      @click-left="$router.back()"
    >
      <!-- 插槽左 -->
      <span slot="left" class="header_left">
        <!-- 图标 -->
        <van-icon name="arrow-left" />
      </span>
      <!-- 插槽右 -->
      <span slot="right" class="header_right">
        <!-- 图标/或者登录注册 -->
      </span>
    </eleheader>
    <!-- 内容 -->
    <div class="content">
      <!--  -->
      <div class="pic">
        <img :src="baseURL + '/img/' + newList.image_path" />
      </div>
      <!--  -->
      <ul class="below">
        <li>{{ newList.description }}</li>
        <li>{{ newList.name }}</li>
        <li>
          评分
          <van-rate
            v-model="value"
            color="orange"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
        </li>
        <li>
          月售单{{ newList.month_sales }}
          <span style="color: orange"
            >售价{{ "￥" + newList.specfoods[0].price }}&nbsp; 起</span
          >
        </li>
        <li>
          <span>评论数 {{ newList.rating_count }}</span> &nbsp;
          <span>好评率{{ newList.satisfy_rate + "%" }}</span>
        </li>
      </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <span class="Income">
        ¥100.00
        <div class="Delivery">
          {{ newList.piecewise_agent_fee && newList.piecewise_agent_fee.tips }}
        </div>
      </span>
      <span class="Settlement">去结算</span>
      <!-- 购物车 -->
      <div class="car">
        <div class="blue"><van-icon name="shopping-cart" /></div>
        <span class="num">5</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../utils/request";
// 引入组件
import eleheader from "../components/eleheader.vue";
export default {
  // 注册组件
  components: {
    eleheader,
  },
  data() {
    return {
      // 基础路径
      baseURL: axios.defaults.baseURL.split(":")[1], // 默认路径
      value: 0, //评级
      newList: {}, //食品数据
    };
  },

  created() {
    // 获取食品详情数据
    this.newList = this.$route.query.goodsArrmsg;
    // 评级
    this.value = this.newList.rating;
  },
};
</script>

<style lang="less" scoped>
.eleheader {
  position: fixed;
}
.header_left,
.header_right {
  padding: 0 20px;
  flex: 1;
}
.header_left {
  .van-icon {
    float: left;
    line-height: 45px;
  }
}
.header_right {
  .van-icon {
    float: right;
    line-height: 45px;
  }
}
// 内容
.content {
  padding-bottom: 60px;
  // 图片
  .pic {
    flex: 1;
    width: 100%;
    text-align: center;
    img {
      margin: 20px;
      width: 80%;
      border-radius: 50%;
    }
  }
  // 文字
  .below {
    margin-left: 20px;
    li {
      line-height: 30px;
    }
    li:nth-child(2) {
      margin-top: 5px;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
// 底部
.footer {
  position: fixed;
  bottom: 0px;
  height: 50px;
  width: 100%;
  color: #fff;

  .Income {
    padding: 5px 0px 0px 80px;
    font-size: 20px;
    display: block;
    width: 70%;
    height: 100%;
    background-color: #3d3d3f;
    .Delivery {
      font-size: 12px;
      margin-top: 3px;
    }
  }
  .Settlement {
    padding-top: 15px;
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 80%;
    width: 30%;
    flex: 1;
    background-color: #4ad96c;
  }
  .car {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -20px;
    left: 20px;
    border-radius: 50%;
    background-color: #3d3d3f;
    color: red;
    .blue {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 5px;
      left: 5px;
      border-radius: 50%;
      background-color: #2e90e4;
      .van-icon-shopping-cart {
        position: absolute;
        color: #fff;
        font-size: 30px;
        top: 5px;
        left: 5px;
      }
    }
    .num {
      color: #fff;
      background-color: red;
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      font-size: 12px;
      top: 0px;
      left: 40px;
      text-align: center;
      line-height: 15px;
    }
  }
}
</style>